﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:viewmodels="clr-namespace:Omnia.ViewModels;assembly=Omnia.ViewModels"
    xmlns:Converters="clr-namespace:Omnia.Converters;assembly=Omnia.Converters"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:UX="clr-namespace:Omnia.UX;assembly=Omnia.UX"
    xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
    x:Class="Omnia.Wallet.Views.CategoriesView"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <phone:PhoneApplicationPage.Resources>
        <Converters:ResourceKeyToPathdataConverter x:Key="ResourceKeyToPathdataConverter"/>
        <Converters:EnumTranslateConverter x:Key="EnumTranslateConverter"/>
        
        <Style TargetType="ListBoxItem" x:Key="style_cate_list_item">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Margin="0,6">
                        	<VisualStateManager.CustomVisualStateManager>
                        		<ec:ExtendedVisualStateManager/>
                        	</VisualStateManager.CustomVisualStateManager>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>
                            
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates" ec:ExtendedVisualStateManager.UseFluidLayout="True">
                            		<VisualStateGroup.Transitions>
                            			<VisualTransition GeneratedDuration="0:0:0.2"/>
                            		</VisualStateGroup.Transitions>
                            		<VisualState x:Name="Selected">
                            			<Storyboard>
                            				<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="btnSP">
                            					<DiscreteObjectKeyFrame KeyTime="0">
                            						<DiscreteObjectKeyFrame.Value>
                            							<Visibility>Visible</Visibility>
                            						</DiscreteObjectKeyFrame.Value>
                            					</DiscreteObjectKeyFrame>
                            				</ObjectAnimationUsingKeyFrames>
                            				<!--<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                             Storyboard.TargetName="grid" d:IsOptimized="True"/>-->
                            			</Storyboard>
                            		</VisualState>
                            		<VisualState x:Name="Unselected" />
                            		<VisualState x:Name="SelectedUnfocused"/>
                            	</VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Unfocused"/>
                                    <VisualState x:Name="Focused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        	
                            <Grid x:Name="grid" Grid.ColumnSpan="3" Grid.RowSpan="3" Background="{StaticResource PhoneSubtleBrush}" Opacity="0"/>
                        	
                            <Path Data="{Binding IconResourceKey, Converter={StaticResource ResourceKeyToPathdataConverter}}" 
                                  Stretch="Uniform" 
                                  Fill="{StaticResource PhoneForegroundBrush}" 
                                  Width="36" Height="36" Margin="12,6" 
                                  RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2">
                        		<Path.RenderTransform>
                        			<TransformGroup>
                        				<RotateTransform Angle="0" />
                        				<ScaleTransform ScaleX="1" ScaleY="1" />
                        			</TransformGroup>
                        		</Path.RenderTransform>
                        	</Path>

                            <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextNormalStyle}" Grid.Column="1"/>
                            <TextBlock Text="{Binding Sum, StringFormat=\{0:c\}}" Style="{StaticResource PhoneTextNormalStyle}" Grid.Column="2"/>
                        	<ProgressBar Value="{Binding Percent}" Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="1"/>

                            <Grid x:Name="btnSP" Visibility="Collapsed" Margin="12" Grid.ColumnSpan="3" Grid.Row="2" Background="{StaticResource PhoneSubtleBrush}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="auto"/>
                                </Grid.ColumnDefinitions>
                                <StackPanel Orientation="Horizontal" Grid.Column="1">
                        			<UX:UXPathButtonWithUriAndParameter Width="32" Height="32" 
                                                                        Padding="6"
                                                                        StrokeThickness="0"
                                                                        IconPath="{StaticResource PATH_ICON_EDIT}" 
                                                                        Uri="/Views/CategoryEditView.xaml" 
                                                                        PamaterName="Guid" 
                                                                        PamaterValue="{Binding Guid}" Margin="12"/>
                                    <UX:UXPathButtonWithUriAndParameter Width="32" Height="32" 
                                                                        Padding="8"
                                                                        StrokeThickness="0"
                                                                        IconPath="{StaticResource PATH_ICON_DETAIL}" 
                                                                        Uri="/Views/CategoryTransactionView.xaml" 
                                                                        PamaterName="Guid" 
                                                                        PamaterValue="{Binding Guid}" Margin="12"/>
                        		</StackPanel>
                                <TextBlock Style="{StaticResource PhoneTextTitle3Style}" VerticalAlignment="Center" Foreground="{StaticResource PhoneChromeBrush}">
                                    <Run Text="{Binding TransactionCount}"/>
                                    <Run Text="{StaticResource IDS_LABEL_CATEGORY_TRANSCOUNT}"/>
                                </TextBlock>
                                
                                <Rectangle Height="1" Grid.ColumnSpan="2" Fill="{StaticResource PhoneForegroundBrush}" Margin="0,0,0,12" Grid.Row="1"/>
                        	</Grid>
                        	
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    
    <Grid x:Name="LayoutRoot">
        <Grid.DataContext>
            <viewmodels:CategoryViewModel/>
        </Grid.DataContext>
        <Grid.Background>
            <ImageBrush Stretch="{Binding GlobalSettings.BackgroundImageStretch}" ImageSource="{Binding BackgroundImageSource}"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        
        <!--Pivot Control-->
        <controls:Pivot Title="{StaticResource IDS_PAGE_TITLE}">
            <!--Pivot item one-->
            <controls:PivotItem Header="{StaticResource IDS_LABEL_CATEGORY_KIND_INCOME}">
                <ListBox ItemsSource="{Binding IncomingCategories}" ItemContainerStyle="{StaticResource style_cate_list_item}"/>
            </controls:PivotItem>

            <!--Pivot item two-->
            <controls:PivotItem Header="{StaticResource IDS_LABEL_CATEGORY_KIND_EXPENSE}">
                <ListBox ItemsSource="{Binding ExpenseCategories}" ItemContainerStyle="{StaticResource style_cate_list_item}"/>
            </controls:PivotItem>
            
        </controls:Pivot>
        
        <UX:UXPathButton Grid.Row="1" HorizontalAlignment="Right" Margin="12"
                         IconPath="{StaticResource PATH_ICON_CLOSE}"
                         Angle="45" Padding="13"
                         Command="{Binding OpenPanelCommand}"/>

        <Grid Grid.RowSpan="2" Visibility="{Binding AddpanelVisibility}">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition />
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <Grid.Background>
                <ImageBrush Stretch="{Binding GlobalSettings.BackgroundImageStretch}" ImageSource="{Binding BackgroundImageSource}"/>
            </Grid.Background>
            <TextBlock Style="{StaticResource PhoneTextTitle1Style}" Text="{StaticResource IDS_LABEL_CATEGORY_ADDNEW}"/>
            
            <ListBox Grid.Row="1">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListBox.ItemContainerStyle>
                <Grid Height="1" Background="{StaticResource PhoneForegroundBrush}" Margin="12"/>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <TextBlock VerticalAlignment="Center" 
                               Text="{StaticResource IDS_LABEL_CATEGORY_NAME}" 
                               Style="{StaticResource PhoneTextTitle3Style}" />
                    <TextBox Grid.Column="1" Text="{Binding ItemToAdd.Name, Mode=TwoWay}" />

                    <TextBlock VerticalAlignment="Center" 
                               Text="{StaticResource IDS_LABEL_CATEGORY_DESCRIPTION}" 
                               Style="{StaticResource PhoneTextTitle3Style}" Grid.Row="1"  />
                    <TextBox Grid.Column="1" Grid.Row="1" 
                             Text="{Binding ItemToAdd.Description, Mode=TwoWay}" />

                    <toolkit:ToggleSwitch IsChecked="{Binding ItemToAdd.Default, Mode=TwoWay}" 
                                          Grid.ColumnSpan="2" 
                                          Header="{StaticResource IDS_LABEL_CATEGORY_DEFAULT}" Grid.Row="2"/>

                    <TextBlock VerticalAlignment="Center" 
                               Text="{StaticResource IDS_LABEL_CATEGORY_KIND}" 
                               Style="{StaticResource PhoneTextTitle3Style}" Grid.Row="3"  />
                    <ListBox HorizontalAlignment="Right" 
                             Grid.Column="1" Grid.Row="3"
                             VerticalAlignment="Center" 
                             Margin="12,12,0,12" 
                             ItemsSource="{Binding TransactionKinds}" 
                             SelectedItem="{Binding ItemToAdd.Kind, Mode=TwoWay}">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <UX:UXRadioButton IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                                <TextBlock Style="{StaticResource PhoneTextTitle3Style}" 
                                                           Text="{Binding Converter={StaticResource EnumTranslateConverter}}"/>
                                            </UX:UXRadioButton>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListBox.ItemContainerStyle>
                    </ListBox>
                </Grid>
                <Grid Height="1" Background="{StaticResource PhoneForegroundBrush}" Margin="12"/>
                <toolkit:ExpanderView>
                    <toolkit:ExpanderView.Header>
                        <TextBlock Style="{StaticResource PhoneTextTitle3Style}" Text="{StaticResource IDS_LABEL_CATEGORY_SETICON}"/>
                    </toolkit:ExpanderView.Header>
                    <ListBox ItemsSource="{Binding CategoryIcons}" 
                             SelectedItem="{Binding ItemToAdd.IconResourceKey, Mode=TwoWay}">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>

                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <Grid>
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup x:Name="SelecteStates">
                                                        <VisualState x:Name="Normal" />

                                                        <VisualState x:Name="Selected">
                                                            <Storyboard>
                                                                <!--<ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="el"/>-->
                                                                <DoubleAnimation To="1" 
                                                                                 Storyboard.TargetProperty="(Grid.Opacity)" 
                                                                                 Storyboard.TargetName="grid"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <Grid x:Name="grid" Opacity="0" Background="{StaticResource PhoneAccentBrush}"/>
                                                <Path x:Name="el" 
                                                      Data="{Binding Converter={StaticResource ResourceKeyToPathdataConverter}}" 
                                                      Stretch="Uniform"
                                                      Fill="{StaticResource PhoneForegroundBrush}" 
                                                      Width="36" Height="36" Margin="12" 
                                                      RenderTransformOrigin="0.5,0.5">
                                                    <Path.RenderTransform>
                                                        <TransformGroup>
                                                        	<RotateTransform Angle="0" />
                                                        	<ScaleTransform ScaleX="1" ScaleY="1" />
                                                        </TransformGroup>
                                                    </Path.RenderTransform>
                                                </Path>
                                            </Grid>

                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListBox.ItemContainerStyle>
                    </ListBox>
                </toolkit:ExpanderView>
            </ListBox>

            <StackPanel Orientation="Horizontal" Grid.Row="2" HorizontalAlignment="Right">
                <UX:UXPathButton Grid.Row="1" 
                                 IconPath="{StaticResource PATH_ICON_SUBMIT}"
                                 Padding="11" 
                                 Margin="12" Command="{Binding AddCommand}"/>

                <UX:UXPathButton Grid.Row="1" 
                                 IconPath="{StaticResource PATH_ICON_CLOSE}"
                                 Padding="13"
                                 Margin="12" Command="{Binding ClosePanelCommand}"/>
            </StackPanel>
            
        </Grid>
        
    </Grid>
    
</phone:PhoneApplicationPage>